<template>
	<view class="content">
		<!-- F1: 自定义状态栏 -->
		<myStatusbar />
		<!-- F2: 自定义导航栏 -->
		<uni-nav-bar 
			title="详情"
			backgroundColor="#090"
			color="#FFF"
			leftIcon="back"
			leftText="返回"
			@clickLeft="goBack"
		/>
		<!-- F3: 内容 -->
		<view class="container" :style="{height: containerHight+'px'}">
			<text class="title">{{detail.title}}</text>
			<!-- <text class="content">{{detail.content}}</text> -->
			<!-- 使用webview -->
			<!-- fullscreen 是否全屏，默认是全屏 -->
			<web-view :src="webviewUrl" :fullscreen="false"></web-view>
		</view>
	</view>
</template>

<script>
	import { activityDetail } from '../../service'
	export default {
		data() {
			return {
				containerHight: 0, // 保存获取的容器高度
				detail: {},  // 保存接口返回的数据
				webviewUrl: '' // 保存web-view的链接地址
				
			}
		},
		async onLoad({aid}) {
			// 获取的编号
			// console.log(aid)
			// 调用请求接口，获取编号对应的数据
			const data = await activityDetail(aid)
			console.log(data)
			this.detail = data[0]
			// 创建一个临时的HTML
			const blob = new Blob([this.detail.content],{type: 'text/html'})
			// 创建URL地址
			this.webviewUrl = URL.createObjectURL(blob)
			
			// 获取屏幕高度
			const {screenHeight,windowHeight,statusBarHeight} = uni.getSystemInfoSync()
			// console.log(screenHeight,windowHeight)
			// 容器的高度 = 屏幕高度- 状态栏高度-导航栏高度-12*2
			this.containerHight = screenHeight - statusBarHeight - 44 - 12*2
		},
		methods: {
			goBack() {
				// 后退
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.uni-navbar {
		display: block;
		// ::v-deep 样式穿透
		::v-deep .uni-navbar__content {
			display: block;
			// 去除自带的下边框
			border-bottom: 0 none;
		}
	}
	.container {
		flex-direction: column;
		background-color: $uni-bg-color;
		margin: $uni-spacing-col-base;
		border-radius: $uni-border-radius-lg;
		padding: $uni-spacing-col-lg*2 $uni-spacing-row-lg*1.5;
		.title {
			font-size: $uni-font-size-lg;
			font-weight: bold;
			text-align: center;
			margin-bottom: $uni-spacing-col-lg;
		}
		.content {
			font-size: $uni-font-size-base;
		}
	}
</style>
